/**
 * 地磁管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>地磁管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="pagination1" class="user-search">
      <el-form-item >
        <el-input size="medium" v-model="pagination1.geoId" placeholder="地磁编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.geoName" placeholder="地磁名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.secName" placeholder="所属路段"></el-input>
      </el-form-item>
      <el-form-item>
          <el-select v-model="pagination1.geoStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 新建导入按钮 -->
    <div class="button">
        <el-button type="primary " size="medium" icon="el-icon-plus" @click = "dialog.dialogVisible = true;">新建</el-button>
        <el-button type="success " size="medium" icon="el-icon-upload2" @click = "dialog2.dialogVisible = true;">导入设备</el-button>
    </div>
    <!--列表-->
    <el-table  size="small" :data="TGeoList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column  prop="geoId" label="地磁编号" width="70" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="geoName" label="地磁名称" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="secName" label="所属路段" width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="pkno" label="绑定泊位" width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="pkStatus" label="泊位情况" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.pkStatus== -1">设备故障</span>
          <span v-if="scope.row.pkStatus== 0">无车</span>
          <span v-if="scope.row.pkStatus== 1">有车</span>
        </template>
      </el-table-column>
      <el-table-column  prop="geoStatus" label="地磁状态" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.geoStatus== -1">未激活</span>
          <span v-if="scope.row.geoStatus== 0">在线</span>
          <span v-if="scope.row.geoStatus== 1">离线</span>
        </template>
      </el-table-column>
      <el-table-column  prop="activeTime" label="状态更新时间" width="140" show-overflow-tooltip>
      </el-table-column>
       <el-table-column  prop="createTime" label="创建时间" width="140" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="selById(scope.row.geoId)" type="primary">编辑</el-button>
          <el-button size="mini" @click="GeoLog(scope.row.geoId)" type="primary">地磁日志</el-button>
          <el-button size="mini" @click="del(scope.row.geoId)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination1.currentPage"
      :page-sizes="pagination2.pageSizes"
      :page-size="pagination1.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination2.total">
    </el-pagination>
    <!-- 添加地磁dialog -->
    <el-dialog title="添加地磁" :visible.sync="dialog.dialogVisible">
      <el-form :model="dialog.form">
        <el-form-item label="地磁名称" :label-width="dialog.formLabelWidth">
          <el-input v-model="dialog.form.geoModel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地磁状态" :label-width="dialog.formLabelWidth">
          <el-select v-model="dialog.form.gerStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGeo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入设备dialog -->
    <el-dialog title="批量导入设备" :visible.sync="dialog2.dialogVisible" width="45%">
      <div class="dialogDiv">
        <span class="dialogFont">第一步：下载模板</span><br><br>
        <el-button type="primary" icon="el-icon-download" size="medium" @click="download">下载</el-button>
      </div>
      <div class="dialogDiv">
        <span class="dialogFont">第二步：完善信息</span>
      </div>
      <div class="dialogDiv">
        <span class="dialogFont">第三步：上传文件</span><br><br>
        <el-upload
                   class="clearfix"
                   action="http://localhost:8080/geos/importExcel"
                   name="file"
                   :on-progress="onExcelProgress"
                   :on-success="handleExcelSuccess"                   
                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                   multiple
                   :limit="1">
              <el-button type="info" icon="el-icon-upload2" plain size="medium" >点击上传</el-button>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog2.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog2.dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑dialog -->
    <el-dialog title="编辑地磁信息" :visible.sync="dialog3.dialogVisible">
      <el-form :model="updateForm">
        <input type="hidden">
        <el-form-item label="地磁名称" :label-width="dialog3.formLabelWidth">
          <el-input v-model="updateForm.geoModel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地磁状态" :label-width="dialog3.formLabelWidth">
          <el-select v-model="updateForm.gerStatus" clearable placeholder="地磁状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateGeo">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      updateForm:{},
      options:[
        {
          value:-1,
          label:"未激活"
        },{
          value:0,
          label:"在线"
        },{
          value:1,
          label:"离线"
        }
      ],
      TGeoList:[],
      loading: false, //是显示加载
      formInline:{},
      pagination1:{
        pageSize:5,
        currentPage:1,
        geoId:"",
        geoName:"",
        secName:"",
        geoStatus:"",
      },
      pagination2:{
        total:0,
        pageSizes:[5,10,20,50,100]
      },
      dialog:{
          dialogVisible:false,
          form:{
            geoName:"",
            gerStatus:-1
          },
          formLabelWidth:"100px",
      },
      dialog2:{
          dialogVisible:false
      },
      dialog3:{
          dialogVisible:false,
          formLabelWidth:"100px"
      }
    }
  },
  methods: {
    search(){
      this.pagination1.currentPage = 1;
      this.selAllOrSelByLike();
    },
    handleExcelSuccess(res, result) {
      this.$message.success("导入成功");
      if (result.response.success) {
        this.selAllOrSelByLike();
      }
    },
    // 上传中
    onExcelProgress(){
    },
    selAllOrSelByLike() {
      this.$axios.post("/geos/selAllGeos",this.pagination1)
      .then(res=>{
        this.TGeoList = res.data.data.TGeoList;
        this.pagination2.total = res.data.data.total;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    handleSizeChange(val){
      this.pagination1.pageSize = val;
      this.pagination1.currentPage = 1;
      this.selAllOrSelByLike();
    },
    handleCurrentChange(val){
      this.pagination1.currentPage = val;
      this.selAllOrSelByLike();
    },
    addGeo(){
      this.dialog.dialogVisible = false;
      this.$axios.post("/geos/add",this.dialog.form)
      .then(res=>{
        if(res.data.code == 200){
          this.$message.success("添加成功");
          this.selAllOrSelByLike();

        }
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    download(){
      let pic = "模板表格";
      this.$axios
        .get("/geos/downLoadFile", {
          params: { filename: pic },
          responseType: "blob",
        })
        .then((res) => {
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", pic); //指定下载后的文件名，防跳转
          document.body.appendChild(link);
          link.click();
          // 释放内存
          window.URL.revokeObjectURL(link.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selById(id){
      this.$axios.get("/geos/"+id)
      .then(res=>{
        this.updateForm = res.data.data.updateForm;
        this.dialog3.dialogVisible = true;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    updateGeo(){
      this.$axios.post("/geos/update",this.updateForm)
      .then(res=>{
        this.$message.success("修改成功！");
        this.selAllOrSelByLike();
        this.dialog3.dialogVisible = false;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    del(id){
      this.$axios.delete("/geos/"+id)
      .then(res=>{
        this.$message.success("删除成功！");
        this.dialog3.dialogVisible = false;
        this.pagination1.currentPage = 1;
        this.selAllOrSelByLike();
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    GeoLog(geoId){
      this.$router.push({name:"地磁日志",query:{geoId:geoId}})
    }
    
  },  
  created(){
    this.selAllOrSelByLike();
  }

 
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.button{
  margin-bottom: 20px;
}

.userRole {
  width: 100%;
}
.dialogDiv{
  margin-bottom: 20px;
}
.dialogFont{
  font-size: 16px;
}
</style>

 
 

 